<template>
  <div>
    <el-card class="card-div">
      <div slot="header">
        <el-button class="el-icon-plus" type="primary" @click="onAddDialog"
          >添加</el-button
        >
      </div>
      <div>
        <el-table style="width: 100%" border :data="trademarkList">
          <el-table-column label="序号" width="80" type="index">
          </el-table-column>
          <el-table-column label="品牌名称" prop="tmName"> </el-table-column>
          <el-table-column label="品牌LOGO">
            <template v-slot="{ row }">
              <div>
                <img :src="row.logoUrl" alt="" width="100" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template v-slot="{ row }">
              <div>
                <el-button
                  type="warning"
                  size="small"
                  @click="tmEdit(row)"
                  class="el-icon-edit-outline"
                ></el-button>
                <el-button
                  type="danger"
                  size="small"
                  @click="tmDelete(row.id)"
                  class="el-icon-delete"
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size.sync="pageSize"
            layout="sizes, prev, pager, next,total"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog
        :title="`${tmId === 0 ? '添加' : '修改'}品牌`"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <div>
          品牌名称
          <el-input
            class="EIput"
            placeholder="请输入品牌名称"
            size="small"
            clearable
            width="500px"
            v-model="tmName"
          ></el-input>
        </div>
        <div style="marginTop:20px">
          品牌LOGO
          <el-upload
            class="avatar-uploader"
            :action="`${BASE_URL}/admin/product/fileUpload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTrademark">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  reqGetTrademarkList,
  reqAddTrademark,
  reqUpdataTrademark,
  reqDeleteTrademark
} from "@/api/product/trademark";

export default {
  data() {
    return {
      currentPage: 1, //当前页
      total: 0, //总条数
      pageSize: 10, //每页展示条数
      trademarkList: [], //品牌分页列表数据
      dialogVisible: false, //是否展示添加框
      BASE_URL: process.env.VUE_APP_BASE_API, //当前环境变量
      imageUrl: "", //当前图片
      tmName: "", //品牌名称
      tmId: 0 //品牌id
    };
  },
  methods: {
    async getTrademarkList() {
      const result = await reqGetTrademarkList(this.currentPage, this.pageSize);
      // console.log(result);
      // 保存品牌列表数据
      this.trademarkList = result.data.records;
      this.total = result.data.total;
    },
    // 上传成功后回调函数
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 上传前的回调函数
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 点击添加按钮回调函数
    onAddDialog() {
      // 清空数据
      this.imageUrl = "";
      this.tmName = "";
      this.tmId = 0;
      // 打开对话框
      this.dialogVisible = true;
    },
    // 点击确定按钮 添加数据
    async addTrademark() {
      // 收集参数
      const tmInfo = {
        id: this.tmId,
        logoUrl: this.imageUrl,
        tmName: this.tmName
      };

      // 根据id判断 进行修改还是新增
      if (tmInfo.id === 0) {
        await reqAddTrademark(tmInfo);
      } else {
        await reqUpdataTrademark(tmInfo);
      }
      // 添加成功关闭对话框
      this.dialogVisible = false;
      // 重新请求数据
      this.getTrademarkList();
    },
    // 点击修改按钮
    tmEdit(row) {
      // 打开对话框
      this.dialogVisible = true;
      console.log(row);
      //  数据回填
      this.imageUrl = row.logoUrl;
      this.tmName = row.tmName;
      this.tmId = row.id;
    },
    // 点击删除按钮
    async tmDelete(id) {
      // 发送删除请求
      await reqDeleteTrademark(id);
      // 重新获取数据
      this.getTrademarkList();
    }
  },

  mounted() {
    // 初始化请求
    this.getTrademarkList();
  },

  // 监听页码变化重新发送请求
  watch: {
    currentPage() {
      this.getTrademarkList();
    },
    pageSize() {
      this.getTrademarkList();
    }
  }
};
</script>

<style lang="scss" scoped>
.card-div {
  margin: 10px 20px;
}
.EIput {
  width: 200px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dotted black;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
